<template>
  <div>
    <p class="title">{{ num }}</p>
    <button @click="handleClick">按钮</button>
    <input type="text" />
    <!-- 3.组件的使用 -->
    <my-component></my-component>
  </div>
</template>

<script>
//1.引入组件
import MyComponent from "./views/MyComponent";
export default {
  name: "APP", //组件名字(组件名字不写 默认以文件名补充)
  //组件1的data必须写成函数形式:原因是将来组件复用时,多个复用的组件不会共享一份数据(某个组件修改数据,其他组件是不变的)
  data() {
    return {
      num: 0,
    };
  },
  methods: {
    handleClick() {
      this.num++;
    },
  },
  //局部注册组件
  comments: {
    MyComponent,
  },
};
</script>

<style>
.title {
  color: pink;
}
</style>